<script setup lang="ts">
import LinkIcon from '@/components/LinkIcon/index.vue'
import { ArrowRightBold } from '@element-plus/icons-vue'
import { useAuth } from '@/stores/auth/index'
import PurchaseFontItem from './components/PurchaseFontItem/index.vue'
interface Props {
    item: any;
}
const $props = defineProps<Props>()
const $router = useRouter()
const { isNextOperation } = useAuth()

function handleJumpFontDetails(id: number) {
    window.open($router.resolve(`/font-details/${id}?categoryType=Font`).href, '_blank')
}
const goodsInfo = ref<any>({})

provide('goodsInfo', goodsInfo)

watch($props, (newValue) => {
    goodsInfo.value = newValue.item

    if (!newValue.item.file) return
    const font = new FontFace(newValue.item.file, `url(${newValue.item.file})`)
    font.load().then((loadedFont) => {
        document.fonts.add(loadedFont)
    })
}, { immediate: true })

const dialogVisible = shallowRef<boolean>(false)

function handleClickPurchase() {
    if (isNextOperation()) {
        dialogVisible.value = true
    }
}

</script>

<template>
    <div class="item" ref="itemRef">
        <div class="left-image">
            <img :src="item.image" alt="image">
        </div>
        <div class="center-content">
            <div class="money">
                <p>￥ {{ item.get_price }}</p>
                <p>￥ {{ item.market_price }}</p>
                <p>市场价</p>
            </div>
            <div class="family" :style="`font-family: '${item.file}'`">{{ item.title }}</div>
            <div class="type-item">
                <p>风格：{{ item.font_style }}</p>
                <p>类型：{{ item.font_type }}</p>
                <p>语系：{{ item.language }}</p>
                <p>字数：{{ item.font_code }}</p>
                <div class="detail" @click="handleJumpFontDetails(item.id)">
                    详情<el-icon size="13px" color="rgb(55, 133, 242)" >
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="right-btn">
            <div class="link">
                <LinkIcon :item="item" @on-click-purchase="handleClickPurchase" />
            </div>
            <button @click="handleClickPurchase">下&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;载</button>
        </div>
        <PurchaseFontItem v-model="dialogVisible" />
    </div>
</template>

<style lang="less" scoped>
.item {
    border-bottom: 1px solid #BBBBBB;
    padding: 25px 0;
    display: grid;
    grid-template-columns: 240px 1fr 195px;
    justify-content: space-between;

    .right-btn {
        .link {
            margin-top: 25px;
        }

        button {
            width: 195px;
            height: 35px;
            border-radius: 27px;
            background-color: rgba(220, 221, 221, 1);
            color: rgba(255, 255, 255, 1);
            border: none;
            cursor: pointer;
            margin-top: 35px;
            transition: all .2s;
            font-size: 16px;
            line-height: 35px;

            &:hover {
                background-color: #F91414;
            }
        }
    }

    .center-content {
        margin-left: 23px;

        .type-item {
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            display: flex;
            margin-top: 7px;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

            p {
                margin-right: 18px;
            }

            .detail {
                color: rgba(55, 133, 242, 1);
                font-size: 16px;
                cursor: pointer;
            }
        }

        .family {
            color: rgba(79, 79, 79, 1);
            font-size: 70px;
            line-height: 80px;
            margin-top: 10px;
        }

        .money {
            display: flex;
            align-items: self-end;
            margin-top: 7px;

            p {

                &:nth-child(1) {
                    color: var(--primary-color);
                    font-size: 28px;
                    line-height: 1em;
                }

                &:nth-child(2) {
                    font-size: 14px;
                    color: #101010;
                    margin-left: 15px;
                    line-height: 1.2em;
                }

                &:nth-child(3) {
                    color: #101010;
                    font-size: 10px;
                    margin-left: 6px;
                    line-height: 1.8em;
                }
            }

        }
    }

    .left-image {
        height: 160px;
        background-color: #BBBBBB;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
</style>